import React, { useState } from 'react';
import { Form, Input, Button, Alert, Typography } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { login } from '../../store/authSlice';
import { loginUser } from '../../services/authService'; // 导入服务层方法
import './LoginForm.css';

const { Text } = Typography;

const LoginForm = () => {
    const [error, setError] = useState(''); // 用于存储错误信息
    const [loading, setLoading] = useState(false); // 用于控制按钮的加载状态
    const dispatch = useDispatch();
    const navigate = useNavigate();

    const handleLogin = async (values) => {
        setError(''); // 清除之前的错误信息
        setLoading(true); // 开始请求时，设置加载状态

        // 自定义验证规则
        const validateInput = (username, password) => {
            if (!username || username.length < 3 || username.length > 20 || !/^[a-zA-Z0-9]+$/.test(username)) {
                return '用户名或密码错误。';
            }

            if (!password || password.length < 6 || password.length > 15 || !/^[a-zA-Z0-9!@#$%^&*()_+[\]{};':"\\|,.<>/?-]+$/.test(password)) {
                return '用户名或密码错误。';
            }

            return null; // 验证通过
        };

        // 调用验证函数
        const validationError = validateInput(values.username, values.password);
        if (validationError) {
            setError(validationError);
            setLoading(false);
            return;
        }

        try {
            const { token, roles, permissions, menus, expiration } = await loginUser(values); // 使用服务层方法进行登录

            // 登录成功后，存储用户信息到 Redux
            dispatch(login({
                token,
                username: values.username,
                roles,
                permissions,
                menus,
                expiration,
            }));

            // 登录后跳转到仪表盘
            navigate('/home');
        } catch (err) {
            console.error(err);
            // 仅当`handleErrorInternally`为`false`时，才需要在这里处理错误
            if (err.message) {
                setError(err.message || '用户名或密码错误。');
            } else {
                setError('发生未知错误，请稍后再试。');
            }
        } finally {
            setLoading(false); // 请求结束后，解除加载状态
        }
    };

    return (
        <Form
            name="login"
            layout="vertical"
            onFinish={handleLogin}
            initialValues={{ remember: true }}
            validateTrigger="onSubmit" // 禁用输入时的验证，仅在提交时验证
        >
            {error && (
                <Alert
                    message={error}
                    type="error"
                    showIcon
                    closable
                    onClose={() => setError('')}
                    style={{ marginBottom: 16 }}
                    className="fade-in-alert" // 添加一个CSS类，用于动画效果
                />
            )}
            <Form.Item
                label="用户名"
                name="username"
                rules={[
                    { required: true, message: '用户名不能为空。' },
                ]}
            >
                <Input
                    prefix={<UserOutlined />}
                    placeholder="请输入用户名"
                    size="large"
                />
            </Form.Item>
            <Form.Item
                label="密码"
                name="password"
                rules={[
                    { required: true, message: '密码不能为空。' },
                ]}
            >
                <Input.Password
                    prefix={<LockOutlined />}
                    placeholder="请输入密码"
                    size="large"
                />
            </Form.Item>
            <Form.Item>
                <Button
                    type="primary"
                    htmlType="submit"
                    block
                    size="large"
                    loading={loading} // 使用加载状态
                >
                    登录
                </Button>
            </Form.Item>
            <Text type="secondary">使用您的平台账户进行登录。</Text>
        </Form>
    );
};

export default LoginForm;
